<template>
	<div class="login">
		<form @submit.prevent>
			<div class="form-item">
				<label for="username">用户名:</label>
				<input type="text" id="username" v-model="username" />
			</div>
			<div class="form-item">
				<label for="password">密　码:</label>
				<input type="password" id="password" v-model="password" />
			</div>
			<div class="form-item">
				<button @click="handleLogin" :disabled="isLoading">
					{{ isLoading ? "loading..." : "登录" }}
				</button>
			</div>
		</form>
	</div>
</template>

<script>
import { mapState } from "vuex";
export default {
	data() {
		return {
			username: "",
			password: "",
		};
	},
	methods: {
		async handleLogin() {
			const result = await this.$store.dispatch("loginUser/login", {
				loginId: this.username,
				loginPwd: this.password,
			});
			if (result === null) {
				alert("密码或用户名错误!");
				this.username = "";
				this.password = "";
				return;
			}
			this.$router.push({ name: this.$route.query.fromName || "Home" });
		},
	},
	computed: {
		...mapState("loginUser", ["isLoading"]),
	},
};
</script>

<style lang="less">
.login {
	width: 300px;
	margin: 0 auto;
	padding: 30px;
	border: 1px solid #ddd;
	border-radius: 5px;
	box-shadow: 0 0 5px #ddd;
	.form-item {
		margin-bottom: 10px;
		label {
			display: inline-block;
			width: 70px;
			text-align: right;
			margin-right: 20px;
			margin-left: -30px;
		}
		input {
			height: 25px;
			width: 200px;
			outline: none;
			border-radius: 5px;
		}
		button {
			margin-top: 10px;
			width: 200px;
			height: 35px;
			background-color: #42b983;
			border: 0;
			color: #fff;
			border-radius: 5px;
			cursor: pointer;
		}
	}
}
</style>
